<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
		.message_list { padding-left: 0; list-style: none; }
		.message_list > li { padding:10px 0 10px 5px; border-bottom: 1px solid #f3f3f3; height:80px; cursor: pointer; position: relative; }
		.message_list > li.active { background-color: #f3f3f3; }
		.message_list > li:hover{ background-color: #f3f3f3; }
		.message_list > li > img { width: 50px; height: 50px; border-radius: 3px; position: absolute; left:0; top:15px; }
		.content { padding-left:60px; word-break: break-all; height: 65px; overflow: hidden; }
		.message-reply { color: #999; font-size: 12px; height: 30px; overflow: hidden; word-break: break-all; clear: both; padding-right: 12px; }
		.message-list-time { position: absolute; top:15px; right:12px; font-size:11px; color: #888;}
		.message-count { float:left; display: inline-block; background-color: #FE6A50; border-radius:50%; color:#fff; padding:0 3px; font-size:12px; border:2px solid #fff; width: auto; min-width:22px; height:22px; text-align:center; line-height:150%; margin-left:6px; }
		.message-name { float: left; }
		
		#conversation{ margin-top: 25px; }
		.message-form-wrapper { text-align: right; padding: 15px 0;}
		#reply { margin-bottom: 10px; }
		.message { display:block; max-width:65%; margin-bottom:30px; position:relative;  padding: 10px 10px; background-color: #fff; border-radius: 11px; -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out;}
		.left.message .arrow { border-width: 0 13px 13px 0; }
		.left.message .arrow:after { border-width: 0 11px 11px 0; }
		.right.message .arrow { border-width: 13px 13px 0 0; }
		.right.message .arrow:after { border-width: 11px 11px 0 0; }
		.message .arrow, .message .arrow::after{ position: absolute; display: block; width: 0px; height: 0px; border-color: transparent; border-style: solid;}
		.left.message .arrow:after { bottom: -12px; left: 2px; border-right-color:#E5E5EA; border-left-width: 0px; content: ""; }
		.left.message .arrow { top: 14px; left:-8px; margin-top:-11px; border-right-color:#E5E5EA; border-left-width:0px; }
		.left.message .arrow:before { top:50%; left:-12px; margin-top:-11px; border-right-color:#E5E5EA; border-left-width:0px; }
		.right.message .arrow:after { top: -12px; right: -11px; border-top-color:#00D449; content: ""; }
		.right.message .arrow { top: 14px; right:-8px; margin-top:-11px; border-top-color:#00D449; }
		.right.message .arrow:before { top:50%; right:-11px; margin-top:-11px; border-right-color:#999; border-left-width:0px; }
		.message-content { white-space: pre-line; word-break: break-all; }
		.message-profile-image{ width:40px; height:40px; border-radius:3px; position: absolute; top:-25px; left: -55px; }
		.message-profile-name { position: absolute; top:-25px; left:0; font-weight: bold; white-space: nowrap; }
		.message.right { float: right; margin-right: 11px; background-color:#00D449; color:#fff; }
		.message.left { float: left; margin-left:55px; margin-top:25px; background-color: #E5E5EA; color:#000; }
		.message-time { position: absolute; bottom: -18px; font-size: 11px; color: #b4b4b4; width: 160px; }
		.message.right .message-time {text-align: right;}
		.message.new { -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); }
		.right.message .message-time { right:0; }
		.left.message .message-time { left:0; }
		#conversation_toolbar { margin-top: 25px; margin-bottom:25px; position: relative; }
		#message-more { text-align: center; color:#888; cursor: pointer; padding:7px 0; border-top:1px dashed #ccc; }
		
		.list_line{ position: absolute; left: 315px; width:1px; height: 100%; background-color: #e6e6e6; top:0; }
		.list_wrapper{ position: absolute; top:55px; width: 300px; }
		.conversation_wrapper{ padding-left:315px; padding-top:10px; width: auto; }
		.chat-line { clear:both; }
		
		#page{height:100%!important;}
		@media screen and (max-width: 768px){
			.list_wrapper{ position:static; width: 100%;}
			.list_line{ display: none; }
			.list_wrapper hr { width: 100%!important; }
			.conversation_wrapper{ padding-left:0; width: 100%; }
			#message-wrapper{ border-top:1px dashed #ccc; }
			body{ background-image: none; background-color: #fff; }
			.mobile-footer-menu{ display: none; }
			#page{padding-bottom:20px!important;height:100%!important;}
		}
		.header{
			z-index:200;
		}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
	<%@ include file="head.jsp" %>
<!-- header -->
<div class="container" style="background-color: #fff;position: relative; min-height:100%;margin-top: -50px;padding-top: 50px;">
	<div class="list_wrapper">
		<h3>메시지</h3>
		<hr style="margin-left:-1px;width:93%;">
		<c:if test="${!empty list}">
		<ul class="message_list">
			<c:forEach items="${list}" var="message">
				<c:choose>
					<c:when test="${message.member_one eq userDto.idx}"><c:set var="to_member_idx" value="${message.member_two}" /></c:when>
					<c:otherwise><c:set var="to_member_idx" value="${message.member_one}" /></c:otherwise>
				</c:choose>
				<li onclick="loadMessage(this, '${message.idx}', '${to_member_idx}')"><img src="/resources/upload/profile/thumbnail/${message.profileImage}"><div class="message-list-time">${fn:substring(message.time,0,10)}</div><div class="content"><div class="message-name">${message.name}</div>
				<c:if test="${message.count != '0'}"><div class="message-count">${message.count}</div></c:if><div class="message-reply">${message.reply}</div></div></li>
			</c:forEach>
		</ul>
		</c:if>
		<c:if test="${empty list}">
			<div style="text-align: center; padding:45px 0; color: #777;">메시지 목록이 없습니다</div>
		</c:if>
	</div>
	<div class="conversation_wrapper">
		<div id="message-wrapper" style="display: none;">
			<div id="conversation_toolbar"><h4 id="name"></h4><div style="position: absolute; right: 0; top:0; "><button title="대화내용지우기" data-toggle="tooltip" type="button" class="btn btn-default btn-sm" onclick="deleteMessage()"><i class="fa fa-trash-o"></i></button></div></div>
			<div id="message-more" onclick="more_message()"><i class="fa fa-comment"></i>&nbsp;이전대화 더보기</div>
			<div id="conversation"></div>
			<form id="message-form">
				<div class="message-form-wrapper">
					<input type="hidden" id="conversation_idx" name="conversation_idx">
					<input type="hidden" id="send" name="send" value="">
					<input type="hidden" id="member_two" name="member_two">
					<textarea class="form-control" rows="5" id="reply" name="reply" maxlength="1000" placeholder="메시지를 입력하세요..." onkeyup="remainMessage()"></textarea>
					<div>
						<div style="float:left;"><span id="reply-length" style="font-size: 12px; color: #ccc;">0</span><span style="font-size: 12px; color: #ccc;">/1000</span></div>
						<button type="button" class="btn btn-success btn-sm" style="float:right; width:60px;" onclick="sendMessage(this)">전송</button>
						<div class="clearfix"></div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="list_line"></div>
</div>

<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript">
	var index=0;
	var messageCnt =0;
   	$(function(){
   		$('[data-toggle="tooltip"]').tooltip({
            'placement': 'top',
            'container': 'body',
            'trigger': "hover"
        });
   		$(".mobile-footer-menu > ul > li:nth(3)").addClass("mf_on");
   	});
   	
   	function loadMessage(obj, idx, member_two){
   		index = 0;
   		messageCnt= 0;
   		$("#conversation").empty();
   		$(".message_list > li").each(function(){
   			$(this).removeClass("active");
   		});
   		$(obj).addClass("active");
   		$("#conversation_idx").val(idx);
   		$("#member_two").val(member_two);
   		$("#message-wrapper").show();
   		$.ajax({
   		    type : "post"
   		    , url : "/getMessages?idx="+idx+"&index="+index
   		    , dataType : "json"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	$("#name").html("<a href='/"+response[0].id+"' target='_blank'>"+response[0].name+"</a>");
   		    	for(var i=0;i<response.length;i++){
   		    		var html = "";
   		    		var is_read = "읽지않음";
   		    		$("ul.message_list").children("li").each(function(){
   		    			if($(this).hasClass("active")){
   		    				$(this).find(".message-count").remove();	
   		    			}
   		    		});
   		    		if(response[i].is_read == "Y") is_read = "읽음";
   		    		if(response[i].from_member_idx == "${userDto.idx}"){
   		    			html += "<div class='message right'><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'><span style='margin-right:10px;'>"+is_read+"</span>"+response[i].time.substring(0,16)+"</div></div><div class='chat-line'></div>";
   		    		}else{
   		    			html += "<div class='message left'><a href='/"+response[i].id+"' target='_blank'><img class='message-profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a><div class='message-profile-name'>"+response[i].name+"</div><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'>"+response[i].time.substring(0,16)+"</div></div><div class='chat-line'></div>";
   		    		}
   		    		messageCnt++;
   		    		$("#conversation").prepend(html);
   		    	}
   		    	if(response.length < 10){
   		    		$("#message-more").hide();
   		    	}else{
   		    		$("#message-more").show();
   		    	}
   		    	$('html, body').animate({scrollTop: $(document).height()}, 600);
   		    }
   		});
   	}
   	
   	function sendMessage(obj){
   		if($("#reply").val() == ""){
   			alertShow("danger","내용을 입력해 주세요", 2000);
   			return false;
   		}
   		var data = $("#message-form").serialize();
   		$.ajax({
   		    type : "post"
   		    , url : "/sendMessage"
   		    , data : data
   		    , dataType : "text"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	if(response == "execute"){
   		    		alertShow("success","전송되었습니다", 1200);
   		    		var $newMessage = $("<div class='message right new'><div class='arrow'></div><div><p class='message-content'>"+$("#reply").val()+"</p></div><div class='message-time'>방금전</div></div><div class='clearfix'></div>");
   		    		$("#conversation").append($newMessage);
   		    		$("ul.message_list").children("li").each(function(){
   		    			if($(this).hasClass("active")){
   		    				$(this).find(".message-reply").html($("#reply").val());	
   		    			}
   		    		});
   		    		$("#reply-length").html("0");
   		    		$("#reply").val("");
   		    		setTimeout(function(){$newMessage.removeClass("new");},300);
   		    	}else{
   		    		alertShow("danger","다시 시도해 주세요", 2000);
   		    	}
   		    }
   		    , beforeSend: function(){
   		    	$(obj).attr("disabled","disabled").html("전송중...");
   		    }
   		    , complete : function(){
   		    	$(obj).removeAttr("disabled").html("전송");
   		    }
   		});
   	}
   	
   	function more_message(){
   		index +=10;
   		$.ajax({
   		    type : "post"
   		    , url : "/getMessages?idx="+$("#conversation_idx").val()+"&index="+index
   		    , dataType : "json"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	var html = "";
   		    	for(var i=response.length-1;i>-1;i--){
   		    		messageCnt++;
   		    		var is_read = "읽지않음";
   		    		$("ul.message_list").children("li").each(function(){
   		    			if($(this).hasClass("active")){
   		    				$(this).find(".message-count").remove();	
   		    			}
   		    		});
   		    		if(response[i].is_read == "Y") is_read = "읽음";
   		    		if(response[i].from_member_idx == "${userDto.idx}"){
   		    			html += "<div class='message right'><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'><span style='margin-right:10px;'>"+is_read+"</span>"+response[i].time.substring(0,16)+"</div></div><div class='chat-line'></div>";
   		    		}else{
   		    			html += "<div class='message left'><img class='message-profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><div class='message-profile-name'>"+response[i].name+"</div><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'>"+response[i].time.substring(0,16)+"</div></div><div class='chat-line'></div>";
   		    		}
   		    	}
   		    	var $moreMessage = $(html).hide();
   		    	$("#conversation").prepend($moreMessage);
   		    	$moreMessage.fadeIn(700);
   		    	if(response.length < 10){
   		    		$("#message-more").hide();
   		    	}
   		    }
   		});
   	}
   	
   	function deleteMessage(){
   		if(confirm("대화내용을 삭제하시겠습니까?")){
   			$.ajax({
   	   		    type : "post"
   	   		    , url : "/deleteMessage?idx="+$("#conversation_idx").val()
   	   		    , dataType : "text"
   	   		    , timeout : 5000
   	   		    , error : function() {
   	   		    	alertShow("danger","다시 시도해 주세요", 2000);
   	   		    }
   	   		    , success : function(response) {
   	   		    	if(response == "execute"){
   	   		    		location.href= "/messages";
   	   		    	}else{
   	   		    		alertShow("danger","다시 시도해 주세요", 2000);
   	   		    	}
   	   		    }
   	   		});
   		}
   	}
   	
   	function remainMessage(){
   		var size = $("#reply").val().length;
   		if(size > 970){
   			$("#content-length").css("color","#FF0000");
   		}else{
   			$("#content-length").css("color","#ccc");
   		}
   		$("#reply-length").html(size);
   	}
</script>
</body>
</html>